<template>
	<div class="system_user_wrapper">
		<el-tree v-bind="treeConfig" :data="departTree" @node-click="handleDepartTree"></el-tree>
		<sw-common-frame class="user" :count="dataCount" :loading="loading">
			<template slot="button">
				<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
			</template>
			<el-form slot="query" size="small" inline>
				<el-form-item>
					<el-input v-model="queryData.userName" clearable placeholder="用户姓名" style="width: 140px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="queryData.account" clearable placeholder="用户账号" style="width: 140px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.type" clearable placeholder="用户类型" style="width: 114px">
						<el-option v-for="(item, index) in userTypes" :key="index" :label="item.deName" :value="item.deValue"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<role-select v-model="queryData.roleIds" :list="roleListData" clearable placeholder="用户角色" style="width: 150px" />
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.del" clearable placeholder="用户状态" style="width: 102px">
						<el-option label="可用" value="1"></el-option>
						<el-option label="禁用" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
				</el-form-item>
			</el-form>
			<div slot="header" class="user_batch_oper">
				<h4>选中：{{ selectedUser.length }} 人</h4>
				<el-button size="small" type="danger" icon="el-icon-delete" plain @click="handleBatchDelete()">批量删除</el-button>
				<el-button size="small" type="warning" plain @click="handleBatchConfigRole()">批量配置角色</el-button>
				<el-button size="small" type="success" plain @click="handleBatchConfigAuth()">批量配置权限</el-button>
				<el-button size="small" type="info" plain @click="handleBatchConfigDept()">批量配置部门</el-button>
			</div>
			<el-table slot="table" size="medium" ref="table" :data="tableData" stripe height="100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="42" align="center"></el-table-column>
				<el-table-column label="用户姓名(账号)" min-width="150" :formatter="returnUserAccount" show-overflow-tooltip />
				<el-table-column label="用户院系" prop="deptName" min-width="120" show-overflow-tooltip></el-table-column>
				<el-table-column label="用户角色" min-width="148">
					<template slot-scope="{ row }">
						<el-tag size="small" disable-transitions v-for="(item, index) in row.menuRoleList" :key="index">{{ item.name }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center" width="70" :formatter="returnUserStatus"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="160" />
				<el-table-column label="操作" width="174">
					<el-button-group slot-scope="{ row }">
						<el-button size="mini" type="warning" @click="handleOpenDialog(row.id)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleTableDelete(row)">删除</el-button>
						<el-dropdown size="medium" trigger="hover" @command="handleUserCommand($event, row)">
							<el-button size="mini" type="info" icon="el-icon-sw-more"></el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="blockedAccount" v-if="row.del === '1'">封禁账号</el-dropdown-item>
								<el-dropdown-item command="activateAccount" v-if="row.del === '2'">激活账号</el-dropdown-item>
								<el-dropdown-item command="updatePassword">重置密码</el-dropdown-item>
								<el-dropdown-item command="configUserRole">配置角色</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</el-button-group>
				</el-table-column>
			</el-table>
			<template slot="page">
				<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
			</template>
		</sw-common-frame>
		<form-dialog v-model="formDialog" :data-id="dataId" :dict-data="dictData" @refresh="queryTableData()"></form-dialog>
	</div>
</template>

<script>
import formDialog from './form';
import { mapGetters } from 'vuex';
import handleMixins from './handle';
import listMixins from '@/mixins/listMixins';
import { getUserList, deleteUser } from '@/api/system/tbSysUser';
export default {
	components: { formDialog },
	enums: ['TB_SYS_USER_TYPE'],
	mixins: [listMixins, handleMixins],
	data() {
		return {
			pageName: '用户',
			configDialog: false,
			selectedUser: [],
			treeConfig: {
				ref: 'tree',
				nodeKey: 'id',
				class: 'depart',
				defaultExpandAll: true,
				highlightCurrent: true,
				expandOnClickNode: false,
				props: { label: 'name', children: 'childList' }
			}
		};
	},
	computed: {
		...mapGetters(['departTree']),
		listFunction() {
			return eval(getUserList);
		},
		deleteFunction() {
			return eval(deleteUser);
		},
		userTypes() {
			return this.dictData['TB_SYS_USER_TYPE'] || [];
		}
	},
	methods: {
		handleDepartTree(data, node) {
			if (!!this.queryData.deptId && this.queryData.deptId === data.id) {
				this.$delete(this.queryData, 'deptId');
				this.$nextTick(() => {
					this.$refs['tree'].setCurrentKey(null);
				});
			} else {
				this.$set(this.queryData, 'deptId', data.id);
			}
			this.queryTableData();
		},

		//表格数据删除
		handleTableDelete(data) {
			let params = { ...data, name: data.userName };
			this.handleDeleteData([params]);
		},

		//批量删除数据
		handleBatchDelete() {
			let params = this.selectedUser.map((n) => {
				return { ...n, name: n.userName };
			});
			this.handleDeleteData(params);
		},

		//更多操作
		handleUserCommand(command, data) {
			if (command === 'blockedAccount') {
				this.handleBanAndRecoveryUser(data.id, 2, '封禁');
			} else if (command === 'activateAccount') {
				this.handleBanAndRecoveryUser(data.id, 1, '激活');
			} else if (command === 'updatePassword') {
				this.handleResetUserPassword(data.id);
			} else if (command === 'configUserRole') {
				this.handleConfigUserRoles(data);
			}
		},

		//选中数据项
		handleSelectionChange(selection) {
			this.selectedUser = [...selection];
		},

		//格式化用户姓名账号
		returnUserAccount(data) {
			return `${data.userName}(${data.account})`;
		},

		//格式化用户状态
		returnUserStatus(data) {
			let attrs = { size: 'medium' };
			if (data.del === '1') {
				attrs['type'] = 'success';
				return this.$createElement('elTag', { attrs }, '可用');
			} else if (data.del === '2') {
				attrs['type'] = 'danger';
				return this.$createElement('elTag', { attrs }, '禁用');
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.system_user_wrapper::v-deep {
	display: flex;
	height: 100%;
	overflow: hidden;
	.depart {
		width: 20%;
		min-width: 210px;
		flex-shrink: 0;
		overflow: auto;
		border-right: solid 1px #ebeef5;
	}
	.user {
		flex: 1;
		overflow: hidden;
	}
	.el-tree-node__content {
		height: 36px;
	}
}
.user_batch_oper {
	display: flex;
	align-items: center;
	height: 32px;
	h4 {
		flex: 1;
		overflow: hidden;
		font-weight: normal;
		font-size: 16px;
		color: #606266;
	}
}
</style>
